<template>
  <div class="lottery-app">
    <header>
      <h1>{{ lotteryConfig.name }} 号码选择</h1>
      <button @click="goBack">返回选择</button>
    </header>

    <div class="main-content">
      <div class="function-tabs">
        <button :class="{ active: activeTab === 'generate' }" @click="activeTab = 'generate'">
          生成号码
        </button>
        <button :class="{ active: activeTab === 'history' }" @click="activeTab = 'history'">
          历史记录
        </button>
        <button :class="{ active: activeTab === 'statistics' }" @click="activeTab = 'statistics'">
          概率统计
        </button>
        <button :class="{ active: activeTab === 'matching' }" @click="activeTab = 'matching'">
          号码匹配
        </button>
      </div>

      <div class="tab-content">
        <!-- 生成号码 -->
        <div v-if="activeTab === 'generate'">
          <LotteryNumbers :config="lotteryConfig" :type="type" :generatedNumbers="generatedNumbers"
            @generate="generateNumbers" />
        </div>

        <!-- 历史记录 -->
        <div v-if="activeTab === 'history'">
          <LotteryHistory :type="type" :name="lotteryConfig.name" :hasBack="lotteryConfig.hasBack" />
        </div>

        <!-- 概率统计 -->
        <div v-if="activeTab === 'statistics'">
          <StatisticsChart :type="type" :name="lotteryConfig.name" :hasBack="lotteryConfig.hasBack" />
          <Statistics :type="type" :name="lotteryConfig.name" :hasBack="lotteryConfig.hasBack" />
        </div>

        <!-- 号码匹配（使用封装组件） -->
        <div v-if="activeTab === 'matching'">
          <optional :config="lotteryConfig" :type="type" @match-success="handleMatchSuccess" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
// 导入组件
import LotteryNumbers from '../components/LotteryNumbers.vue'
import LotteryHistory from '../components/LotteryHistory.vue'
import Statistics from '../components/Statistics.vue'
import StatisticsChart from '../components/StatisticsChart.vue'
import optional from '../components/optional.vue' // 导入封装的匹配组件
import { getAllTypes } from '@/api/api'

// 彩票类型配置
const LOTTERY_TYPES = {
  ssq: {
    name: '双色球',
    front: { count: 6, min: 1, max: 33, minSelect: 6 },
    back: { count: 1, min: 1, max: 16, minSelect: 1 }
  },
  dlt: {
    name: '大乐透',
    front: { count: 5, min: 1, max: 35, maxCombo: 15, minSelect: 5 },
    back: { count: 2, min: 1, max: 12, maxCombo: 12, minSelect: 2 }
  }
}

const router = useRouter()
const route = useRoute()
const type = route.params.type

// 状态管理
const activeTab = ref('generate')
const lotteryConfig = ref({})

const generatedNumbers = ref(null)


const getLotteryConfig = async () => {
  const response = await getAllTypes({ code: type })
  if (response.code === 20000) {
    lotteryConfig.value = response.data[0] || {}
  }
}

// 方法
const goBack = () => {
  router.push('/select')
}

// 生成号码
const generateNumbers = () => {
  const config = lotteryConfig.value

  // 生成前区号码
  const front = []
  while (front.length < config.front.count) {
    const num = Math.floor(Math.random() * (config.front.max - config.front.min + 1)) + config.front.min
    if (!front.includes(num)) front.push(num)
  }
  front.sort((a, b) => a - b)

  // 生成后区号码
  const back = []
  while (back.length < config?.back?.count) {
    const num = Math.floor(Math.random() * (config.back.max - config.back.min + 1)) + config.back.min
    if (!back.includes(num)) back.push(num)
  }
  back.sort((a, b) => a - b)

  generatedNumbers.value = { front, back }
}

// 处理匹配成功事件
const handleMatchSuccess = (result) => {
  console.log('匹配成功:', result)
}

onMounted(async () => {
  await getLotteryConfig()
  generateNumbers()
})
</script>

<style scoped>
.lottery-app {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

h1 {
  color: #333;
  margin: 0;
}

header button {
  padding: 0.5rem 1rem;
  background-color: #666;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.function-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.function-tabs button {
  padding: 0.7rem 1.2rem;
  border: none;
  background-color: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.function-tabs button.active {
  background-color: #42b983;
  color: white;
}

.tab-content {
  padding: 1.5rem;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: white;
  min-height: 400px;
}
</style>